<template>
  <div class="app-content">
    <!-- 顶部tips -->
    <div class="tips" ref="tips">
      <h3
        style="
          color: #409eff;
          font-weight: bold;
          font-size: 14px;
          margin-bottom: 10px;
        "
      >
        供应链分单
      </h3>
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="订单信息">
          <el-input
            size="small"
            v-model="SearchForm.OrderNo"
            placeholder="请输入搜索的信息"
          ></el-input>
        </el-form-item>
        <el-form-item label="订单类型">
          <el-select
            size="small"
            v-model="SearchForm.OrderType"
            placeholder="请选择订单类型"
          >
            <el-option
              :label="value.label"
              :value="value.value"
              v-for="value in OrderTypeOptions"
              :key="value.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="primary" @click="GetDataList"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- 中间表格部分 -->
    <Vue_Table
      v-if="tabaleHeight.length"
      ref="VueTable"
      :tableData="tableData"
      :PageInfo="PageInfo"
      :loading="loading"
      :tabaleHeight="tabaleHeight"
    />
    <!-- 分页部分 -->
    <div class="pagination">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="paramsquery.pageIndex"
        :page-size="paramsquery.pageSize"
        layout="total, prev, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 添加弹窗 -->
    <!-- <Vue_AddForm :Mobile="Mobile" :PageInfo="PageInfo" /> -->
    <!-- 修改弹窗 -->
    <!-- <Vue_UpdataForm :Mobile="Mobile" :PageInfo="PageInfo" @UpdataList="UpdataInfo" /> -->
  </div>
</template>

<script>
import { mapState } from "vuex"; // 引入vuex属性
import mixin from "@/mixins/mixin"; // 引入mixin
import { GetQwOrder,UpdataOrder } from "@/api/index"; // 引入订单接口
// import Vue_Table from "@/components/table/index"; // 引入表格组件
// import Vue_AddForm from "@/components/addForm/index"; // 引入添加弹窗
// import Vue_UpdataForm from "@/components/updataForm/index"; // 引入修改弹窗
import { PageInfo } from "./PageInfo"; // 引入页面信息
export default {
  mixins: [mixin],
  data() {
    return {
      /* 页面信息 */
      PageInfo,
      /* 搜索部分 */
      SearchForm: {
        OrderNo: "",
        OrderType: 1,
      },
      OrderTypeOptions: [
        {
          value: 1,
          label: "正式订单",
        },
        {
          value: 2,
          label: "售后订单",
        },
        {
          value: 3,
          label: "退款订单",
        },
      ],
      /* 表格部分 */
      loading: true,
      tableData: [],
      paramsquery: {
        pageIndex: 1,
        pageSize: 30,
      },
      total: 0,
    };
  },
  computed: {
    ...mapState(["isMobile"]),
  },
  created() {},
  mounted() {
    this.GetDataList();
    // console.log(this.tabaleHeight);
  },
  watch: {},
  methods: {
    // 请求列表数据
    GetDataList() {
      this.loading = true;
      const data = {
        pageIndex: this.paramsquery.pageIndex,
        type: this.SearchForm.OrderType,
      };
      GetQwOrder(data).then((res) => {
        // console.log(res);
        this.loading = false;
        // this.$refs.VueTable.ResetTableStyle();
        res.orderList.map((item) => {
          Object.entries(item).forEach(([key, value]) => {
            if (value === null) {
              item[key] = "";
            }
          });
        });
        this.tableData = res.orderList;
        this.pageIndex = res.pageIndex;
        this.pageSize = res.pageSize;
        this.total = res.pageTotal;
      }).catch(err =>{
        console.log(err);
        this.loading = false
      })
    },
     // 修改数据
     UpdataInfo(e) {
      // console.log(e);
      const data = {
        orderId: e.order_id,
        orderType: e.order_type,
        orderOperate: e.order_operate,
        reportPerson: e.report_person,
        delayedDeliveryTime: e.delayed_delivery_time,
        abilityPic:e.ability_pic,
      };
      UpdataOrder(data).then((res) => {
        // console.log(res);
        if (res.msg) {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.GetDataList();
          this.$EventBus.$emit("eventUpdata", { show: false });
        }else{
          this.$message.error('修改失败');
        }
      });
    },
    // 新增一条数据
    onAdd() {
      this.$EventBus.$emit("eventAdd", "");
    },
  },
  components: {
    Vue_Table,
    Vue_AddForm,
    Vue_UpdataForm
  },
};
</script>

<style scoped lang="less">
.home {
  width: 100%;
  height: 100%;
}
.tips {
  width: 100%;
  padding: 15px;
  margin-bottom: 15px;
  box-sizing: border-box;
  background-color: #ecf5ff;
}
.pagination {
  width: 100%;
  height: 50px !important;
  display: flex;
  align-items: center;
}
/deep/ .el-form-item {
  margin-bottom: 0;
}
</style>
